
<template>
    <div class="nav">
        <div class="nav-item" v-for="(item,index) of navItems" :key="index">
            <span :class="{navactive:navIndex===index}" @click="changeNavActive(index,item.homeComponentIndex)">{{item.name}}

            </span>
        </div>
        <span 
        class="iconfont iconallow"
        v-bind:class="{iconallowmore:!more}"
        @click="showMore"
        >&#xe611;</span>
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    name: 'Nav',
    data() {
        return {
            more:0,
            navItems:[
                {
                    name:'推荐',
                    homeComponentIndex:'Recommend'
                },
                {
                    name:'手机',
                    homeComponentIndex:'Phone'
                },
                {
                    name:'智能',
                    homeComponentIndex:'Intellect'
                },
                {
                    name:'电视',
                    homeComponentIndex:'Tv'
                },
                {
                    name:'笔记本',
                    homeComponentIndex:'Lacktop'
                },
                {
                    name:'家电',
                    homeComponentIndex:'Homeel'
                },
                {
                    name:'生活周边',
                    homeComponentIndex:'Life'
                }
            ],
        }
    },
    computed:{
        ...mapState(['navIndex'])
    },
    methods:{
        showMore() {
            this.more = !this.more;
        },
        changeNavActive(index,homeComponentIndex) {
            if(index === this.navIndex) {
                return;
            } 
            let slideDirection;
            if(index > this.navIndex) {
                slideDirection = 'left';
            } else {
                slideDirection = 'right';
            }
            this.switchhomeComponentIndex({index,homeComponentIndex,slideDirection});
        },
        ...mapMutations(['switchNav','switchhomeComponentIndex'])
    }
}
</script>

<style lang="stylus">
@import '../assets/css/theme.styl'
    .nav
        width 100%;
        height 35px;
        line-height 35px;
        overflow hidden
        position relative
        color: rgb(116, 116, 116)
        text-align left 
        .nav-item
            display inline-block;
            height 33px
            line-height 33px;
            padding 0 14px;
            span
                display inline-block;
                height 30px;
                line-height 30px;
        .iconallow
            position absolute
            top 0;
            right 14px;
            font-size 22px;
            color #ccc;
            transition all .3s;
        .iconallowmore
            transform rotate(180deg);
    .navactive
        color $themecolor;
        border-bottom: 2Px solid rgb(237, 91, 0);


</style>